<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 引入 Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">

    <!-- 引入 Bootstrap 的 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>

    <title>Title</title>
</head>
<body>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    添加
</button>

<div class="row">
    <div class="col-md-3">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" id="basic-addon2" >搜索</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加员工</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="AddEmpServlet" method="post">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control"
                                   id="emp_name" placeholder="empName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">员工部门</label>
                        <div class="col-sm-10">
                            <select class="form-select" aria-label="Default select example" name="depart">
                                <option selected>请选择一个选项</option>
                                <option value="开发">开发</option>
                                <option value="财务">财务</option>
                                <option value="人事">人事</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword4" class="col-sm-2 control-label">员工工资</label>
                        <div class="col-sm-10">
                            <input type="text" name="salary" name="salary"
                                   class="form-control" id="emp_salary" placeholder="salary">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">添加</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


</body>
</html>

<script>
    var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
        keyboard: false
    })
</script>

